<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Local: <br>
<div align="center" >
<video  id="localVideo" autoplay></video></div><br>
Remote: <br>
<div align="center">
<video id="remoteVideo" autoplay></video>
</div>
<script>
    // 仅仅用于控制哪一端的浏览器发起offer，#号后面有值的一方发起
    var isCaller = window.location.href.split('#')[1];

    // 与信令服务器的WebSocket连接
    var socket = new WebSocket("ws://192.168.199.217:8888");
    alert("connect success");
    // stun和turn服务器
    var iceServer = {
        "iceServers": [{
            "url": "stun:stun.l.google.com:19302"
        }, {
            "url": "turn:numb.viagenie.ca",
            "username": "webrtc@live.com",
            "credential": "muazkh"
        }]
    };

    // 创建PeerConnection实例 (参数为null则没有iceserver，即使没有stunserver和turnserver，仍可在局域网下通讯)
    var pc = new webkitRTCPeerConnection(iceServer);
    alert("connect success");
    // 发送ICE候选到其他客户端
    pc.onicecandidate = function(event){
        if (event.candidate !== null) {
            socket.send(JSON.stringify({
                "event": "_ice_candidate",
                "data": {
                    "candidate": event.candidate
                }
            }));
        }
    };

    // 如果检测到媒体流连接到本地，将其绑定到一个video标签上输出
    pc.onaddstream = function(event){
        document.getElementById('remoteVideo').srcObject =event.stream;
    };

    // 发送offer和answer的函数，发送本地session描述
    var sendOfferFn = function(desc){
                pc.setLocalDescription(desc);
                socket.send(JSON.stringify({
                    "event": "_offer",
                    "data": {
                        "sdp": desc
                    }
                }));
            },
            sendAnswerFn = function(desc){
                pc.setLocalDescription(desc);
                socket.send(JSON.stringify({
                    "event": "_answer",
                    "data": {
                        "sdp": desc
                    }
                }));
            };
    alert("connection finished");
    // 获取本地音频和视频流
    navigator.webkitGetUserMedia({
        "audio": true,
        "video":{mandatory:{/*minAspectRatio:2.777,maxAspectRatio:2.778,*/maxWidth:120,maxHeight:80}}
    }, function(stream){
        //绑定本地媒体流到video标签用于输出
        document.getElementById('localVideo').srcObject = stream;
        //向PeerConnection中加入需要发送的流
        pc.addStream(stream);
        //如果是发起方则发送一个offer信令
        if(isCaller){
            pc.createOffer(sendOfferFn, function (error) {
                console.log('Failure callback: ' + error);
            });
        }
    }, function(error){
        //处理媒体流创建失败错误
        alert('getUserMedia error: ' + error);
        console.log('getUserMedia error: ' + error);
    });

    //处理到来的信令
    socket.onmessage = function(event){
        var json = JSON.parse(event.data);
        console.log('onmessage: ', json);
        //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
        if( json.event === "_ice_candidate" ){
            pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
        } else {
            pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
            // 如果是一个offer，那么需要回复一个answer
            if(json.event === "_offer") {
                pc.createAnswer(sendAnswerFn, function (error) {
                    console.log('Failure callback: ' + error);
                });
            }
        }
    };
</script>
</body>
</html>